<template>
    <div class="appMainWarp">
        <div class="demo_blok">
            <div class="IPMInformation">
                <div class="IPMinfo">
                    <el-form
                        :model="formData"
                        class="demo-form-inline text_left"
                        size="small"
                        label-width="120px"
                        ref="formData"
                        :rules="rules"
                    >
                        <div class="IPMinfo_content">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="姓名：">
                                        <el-input
                                            v-model="formData.userName"
                                            :disabled="true"
                                            placeholder="请输入您的姓名"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="是否是党员：">
                                        <el-input
                                            v-model.trim="formData.labelCommunist"
                                            placeholder="是否为党员"
                                            :disabled="true"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="所在小组：">
                                        <el-input
                                            v-model="formData.teamName"
                                            :disabled="true"
                                            placeholder="请输入您的所在小组"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="座右铭：">
                                        <el-input
                                            type="textarea"
                                            :autosize="{minRows:3,maxRows:4}"
                                            v-model="formData.userMotto"
                                            placeholder="请输入您的座右铭"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <div class="IPMImg">
                                        <el-form
                                            :model="formDataImg"
                                            class="demo-form-inline"
                                            size="small"
                                            label-width="120px"
                                            ref="formDataImg"
                                            :rules="rulesImg"
                                        >
                                            <el-row>
                                                <el-col :span="24">
                                                    <el-form-item label="个人头像：">
                                                        <el-upload
                                                            class="avatar-uploader"
                                                            list-type="picture-card"
                                                            :action="imgActionURL"
                                                            :on-success="handleAvatarSuccess"
                                                            :on-remove="handleRemove"
                                                            :on-preview="handlePictureCardPreview"
                                                            :before-upload="beforeAvatarUpload"
                                                            :auto-upload="false"
                                                            ref="upload"
                                                            :limit="1"
                                                            :on-exceed="handleImage"
                                                        >
                                                            <i
                                                                class="el-icon-plus avatar-uploader-icon"
                                                            ></i>
                                                            <div slot="tip" class="el-upload_tip">
                                                                <el-button
                                                                    type="success"
                                                                    @click="submitUpload"
                                                                >上传到服务器</el-button>
                                                                <p>只能上传 jpg/png 文件，且不超过2M</p>
                                                            </div>
                                                        </el-upload>
                                                    </el-form-item>
                                                    <!-- <el-dialog v-drag :visible.sync="dialogVisible">
                                            <img width="100%" :src="dialogImageUrl" alt />
                                                    </el-dialog>-->
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </div>
                                </el-col>
                            </el-row>
                            <div class="footer text_center">
                                <el-button
                                    type="primary"
                                    size="small"
                                    @click="handleClickInfoSubmit"
                                >修改信息</el-button>
                            </div>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.IPMInformation {
    margin-top: 20px;
    .IPMinfo {
        height: 500px;
        .IPMinfo_content {
            width: 890px;
            display: inline-block;
            text-align: left;
            border: 1px solid #d9d9d9;
            padding: 35px;
        }

        .avatar-uploader {
            text-align: left;
            margin-left: 25px;
            .el-upload {
                background-color: #f1f1f1;
                border: 1px dashed #c0ccda;
                border-radius: 6px;
                .el-upload {
                    border: 1px dashed #d9d9d9;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    &:hover {
                        border-color: #409eff;
                    }
                }
            }
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 148px;
            height: 148px;
            line-height: 148px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-upload_tip {
            display: inline-block;
            margin-left: 50px;
            margin-top: 40px;
        }
    }
}
</style>
<script>
import { mapGetters } from 'vuex';
export default {
    name: 'IPMInformation',
    props: {
        closeDialog: {
            required: true,
            type: Function,
        }
    },
    data() {
        return {
            formData: {
                userAccount: '',
                labelCommunist: '',
                teamName: '',
                userName: '',
                userMotto: '',
                id: '',
            },

            formDataImg: {
                month: '',
            },
            imageUrl: '',
            imgActionURL: '/iccsrv/sys/uploadFile/uploadMultipartFile',
            dialogImageUrl: '',
            dialogVisible: false,
            fileName: '',//文件上传成功 返回名称
            networkPath: '',//上传时图片路径
            userAvatar: '',//登录时 图片路径
            rules: {},
            rulesImg: {},
        }
    },
    computed: {
        ...mapGetters([
            'userInfo',
            'teamInfo',
            'userAssociate',
        ]),
    },
    mounted() {
        this.formData.userAccount = this.userInfo.userAccount;//工号
        this.formData.teamName = this.teamInfo.teamName;//组别
        this.formData.userName = this.userInfo.userName;//姓名
        this.formData.labelCommunist = this.userInfo.labelCommunist === '1' ? "是" : "否";//是否是党员
        this.formData.userMotto = this.userAssociate.userMotto;//座右铭
        this.formData.id = this.userInfo.id;
    },
    methods: {
        // 信息提交
        handleClickInfoSubmit() {
            // this.submitUpload();
            console.log('!this.networkPath', this.networkPath);
            if (!this.networkPath) {
                this.$confirm('头像信息为空，是否继续？', '个人中心', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.updataInfo();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消，信息提交操作'
                    })
                })
            } else {
                console.log('!this.networkPath', this.networkPath);
                this.userAvatar = this.networkPath;
                this.updataInfo();
            }

        },
        // 个人中心 信息提交
        updataInfo() {
            let params = {
                id: this.formData.id,//坐席id
                userAvatar: this.userAvatar || '',//图片路径
                userName: this.formData.userName,
                userMotto: this.formData.userMotto,
                labelCommunist: (this.formData.labelCommunist === '是' ? '1' : '0'),
            };
            this.$post.information.addOrUpdate(params).then((res) => {
                console.log('个人中心信息修改成功！', res);
                if (res.data.success) {
                    this.$message.success('个人中心信息修改成功！')
                    // 弹框关闭方法
                    this.closeDialog();
                }
            }, () => {
                // 头像上传成功后 信息上传失败 删除头像
                console.log('个人中心信息更新失败');
                this.deleteFile(this.fileName);
            });
        },
        // 点击上传图片
        submitUpload() {
            // this.dialogVisible = true;
            this.$refs.upload.submit();
        },
        handleAvatarSuccess(res, file) {
            if (res.success) {
                this.$message.success(res.content.msg)
            }
            this.networkPath = res.content.networkPath;
            // this.imageUrl = URL.createObjectURL(file.raw);
            console.log('文件上传时成功时的钩子', res, file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            // this.dialogVisible = true;
            console.log('点击文件列表中已上传文件时的钩子');

        },
        beforeAvatarUpload(file) {
            console.log('文件上传之前的钩子，多用来限制文件的格式和大小');
            const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式！');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB！');

            }
            return isJPG && isLt2M;
        },
        handleRemove(file) {
            console.log('文件列表移除文件时的钩子', file);
        },
        handleImage(files, fileList) {
            //限制文件上传次数的
            this.$message.warning(`当前限制上传图片，一次只能上传一张图片，请修改！`)

        },
        // 删除图片
        deleteFile(fileId) {
            this.$post.fileUpload.deleteOneFile({ id: fileId })
                .then((res) => {
                    if (res.data.success) {
                        // this.$message.success('删除成功！');
                        if (this.tableData.length === 1) {
                            this.currentPage = this.currentPage - 1;
                        }
                        this.getInitData(this.formData);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
        }
    },
}
</script>